<template>
  <div class="CardList">
    <div v-for="(item,index) in dept" :key="item.name" class="progress-item">
      <span>{{ item.dept_name }}</span>

      <el-progress
        :percentage="parseFloat(item.num||item.fee) / 1000 * 100"
        :color="colorChange(index)"
        :show-text="false"
      />

      <span class="progressText">{{ item.num||item.fee }}</span>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    dept: {
      type: Array,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    format(percentage) {
      return percentage
    },
    colorChange(index) {
      switch (index) {
        case 0:
          return '#F34D4E'

        case 1:
          return '#408AFF'

        case 2:
          return '#FDD843'

        case 3:
          return '#25D096'

        case 4:
          return '#CF8FF8'

        default:
          return '#F34D4E'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-item {
  margin-top: 47px;
  span {
    display: inline-block;
    width: 150px;
    font-size: 14px;
    color: #4a5a7f;
    float: left;
    margin-top: -5px;
  }
  .progressText{
    float: right;
    width: 80px;
    margin-top: -11px;
  }
}
</style>

<style lang="scss">
.CardList {
  overflow: auto;
  height: 300px;
  .el-progress-bar {
    width: 83%;
  }
}
</style>
